<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Messages React Component | Framework7 React Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Messages React Component | Framework7 React Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
                <li><a href="react-component-extensions.html">React Component Extensions</a></li>
                <li><a href="navigation-router.html">Navigation / Router</a></li>
                <li><a href="colors.html">Color Properties</a></li>
              </ul>
            </li>
            <li>
              <div class="title">React Components</div>
              <ul>
                <li><a href="app.html">App</a></li>
                <li><a href="accordion.html">Accordion</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icon.html">Icon</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-item.html">List Item</a></li>
                <li><a href="list-button.html">List Button</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable.html">Sortable</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="view.html">View</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Messages Component</h1>
          <ul class="docs-index"></ul>
          <p>Messages React component represents <a href="../docs/messages.html">Messages</a> component.</p>
          <h2>Messages Components</h2>
          <p>There are following components included:</p>
          <ul>
            <li><code><b>Messages</b></code> / <code><b>F7Messages</b></code> - main Messages container</li>
            <li><code><b>Message</b></code> / <code><b>F7Message</b></code> - single message element</li>
            <li><code><b>MessagesTitle</b></code> / <code><b>F7MessagesTitle</b></code> - single messages title element</li>
          </ul>
          <h2>Messages Properties</h2>
          <table class="params-table">
            <thead>
              <tr>
                <th>Prop</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th colspan="4">&lt;Messages&gt; properties</th>
              </tr>
              <tr>
                <td>init</td>
                <td>boolean</td>
                <td>true</td>
                <td>Initializes Messages component</td>
              </tr>
              <tr>
                <td>newMessagesFirst</td>
                <td>boolean</td>
                <td>false</td>
                <td>Enable if you want to use new messages on top, instead of having them on bottom</td>
              </tr>
              <tr>
                <td>scrollMessages</td>
                <td>boolean</td>
                <td>true</td>
                <td>Enable/disable messages autoscrolling when adding new message</td>
              </tr>
              <tr>
                <td>scrollMessagesOnEdge</td>
                <td>boolean</td>
                <td>true</td>
                <td>If enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view</td>
              </tr>
              <tr>
                <th colspan="4">&lt;Message&gt; properties</th>
              </tr>
              <tr>
                <td>type</td>
                <td>string</td>
                <td>sent</td>
                <td>Message type: <code>sent</code> (default) or <code>received</code></td>
              </tr>
              <tr>
                <td>text</td>
                <td>string</td>
                <td></td>
                <td>Message text</td>
              </tr>
              <tr>
                <td>avatar</td>
                <td>string</td>
                <td></td>
                <td>Message user's avatar URL</td>
              </tr>
              <tr>
                <td>name</td>
                <td>string</td>
                <td></td>
                <td>Message user's name</td>
              </tr>
              <tr>
                <td>image</td>
                <td>string</td>
                <td></td>
                <td>Message image URL</td>
              </tr>
              <tr>
                <td>header</td>
                <td>string</td>
                <td></td>
                <td>Message header</td>
              </tr>
              <tr>
                <td>footer</td>
                <td>string</td>
                <td></td>
                <td>Message footer</td>
              </tr>
              <tr>
                <td>textHeader</td>
                <td>string</td>
                <td></td>
                <td>Message text header</td>
              </tr>
              <tr>
                <td>textFooter</td>
                <td>string</td>
                <td></td>
                <td>Message text footer</td>
              </tr>
              <tr>
                <td>first</td>
                <td>boolean</td>
                <td>false</td>
                <td>Defines that the message is first in the conversation</td>
              </tr>
              <tr>
                <td>last</td>
                <td>boolean</td>
                <td>false</td>
                <td>Defines that the message is last in the conversation</td>
              </tr>
              <tr>
                <td>tail</td>
                <td>boolean</td>
                <td>false</td>
                <td>Defines that the message has visual "tail". Usually last message in conversation</td>
              </tr>
              <tr>
                <td>sameName</td>
                <td>boolean</td>
                <td>false</td>
                <td>Defines that this message sender name is the same as on previous message</td>
              </tr>
              <tr>
                <td>sameHeader</td>
                <td>boolean</td>
                <td>false</td>
                <td>Defines that this message header text is the same as on previous message</td>
              </tr>
              <tr>
                <td>sameFooter</td>
                <td>boolean</td>
                <td>false</td>
                <td>Defines that this message footer text is the same as on previous message</td>
              </tr>
              <tr>
                <td>sameAvatar</td>
                <td>boolean</td>
                <td>false</td>
                <td>Defines that this message user's avatar URL is the same as on previous message</td>
              </tr>
            </tbody>
          </table>
          <h2>Messages Methods</h2>
          <table class="methods-table">
            <tr>
              <th colspan="2">&lt;Messages&gt; methods</th>
            </tr>
            <tr>
              <td>.scroll(<span>duration, position</span>);</td>
              <td>Scroll messages to top/bottom depending on <code>newMessagesFirst</code> parameter
                <ul class="method-parameters">
                  <li><span class="parameter">duration</span> - <span class="parameter-type">number</span> scroll duration in ms</li>
                  <li><span class="parameter">position</span> - <span class="parameter-type">number</span> scroll position in px</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>.showTyping(<span>message</span>);</td>
              <td>Show typing message indicator
                <ul class="method-parameters">
                  <li><span class="parameter">message</span> - <span class="parameter-type">object</span> - <a href="../docs/messages.html#single-message-parameters">parameters of message</a> to add</li>
                </ul>
              </td>
            </tr>
            <tr>
              <td>.hideTyping()</td>
              <td>Hide typing message indicator</td>
            </tr>
          </table>
          <h2>Messages Events</h2>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th colspan="2">&lt;Message&gt; events</th>
              </tr>
              <tr>
                <td>click</td>
                <td>Event will be triggered when user clicks on message bubble</td>
              </tr>
              <tr>
                <td>clickName</td>
                <td>Event will be triggered when user clicks on message user's name</td>
              </tr>
              <tr>
                <td>clickText</td>
                <td>Event will be triggered when user clicks on message text</td>
              </tr>
              <tr>
                <td>clickAvatar</td>
                <td>Event will be triggered when user clicks on message user's avatar</td>
              </tr>
              <tr>
                <td>clickHeader</td>
                <td>Event will be triggered when user clicks on message header</td>
              </tr>
              <tr>
                <td>clickFooter</td>
                <td>Event will be triggered when user clicks on message footer</td>
              </tr>
              <tr>
                <td>clickBubble</td>
                <td>Event will be triggered when user clicks on message bubble</td>
              </tr>
            </tbody>
          </table>
          <h2>Messages Slots</h2>
          <p>Single message React component (<code>&lt;Message&gt;</code>) has additional slots for custom elements:</p>
          <ul>
            <li><code><b>default</b></code> - element will be inserted as a child of <code>&lt;div class="message-bubble"&gt;</code> element in the end</li>
            <li><code><b>start</b></code> - element will be inserted in the beginning and direct child of main message element <code>&lt;div class="message"&gt;</code></li>
            <li><code><b>end</b></code> - element will be inserted in the end and direct child of main message element <code>&lt;div class="message"&gt;</code></li>
            <li><code><b>content-start</b></code> - element will be inserted in the beginning and direct child of the <code>&lt;div class="message-content"&gt;</code> element</li>
            <li><code><b>content-end</b></code> - element will be inserted in the end and direct child of the <code>&lt;div class="message-content"&gt;</code> element</li>
            <li><code><b>bubble-start</b></code> - element will be inserted in the beginning and direct child of the <code>&lt;div class="message-bubble"&gt;</code> element</li>
            <li><code><b>bubble-end</b></code> - element will be inserted in the end and direct child of the <code>&lt;div class="message-bubble"&gt;</code> element. Same as <code><b>default</b></code> slot</li>
          </ul>
          <p>The following slots can be used inside of single message instead of same props if you need to pass there more complext layout:</p>
          <ul>
            <li><code><b>header</b></code> - element will be inserted in message header</li>
            <li><code><b>footer</b></code> - element will be inserted in message footer</li>
            <li><code><b>text</b></code> - element will be inserted in message text</li>
            <li><code><b>name</b></code> - element will be inserted in message name</li>
            <li><code><b>image</b></code> - element will be inserted in message image (supposed tp be an <code>&lt;img&gt;</code> element)</li>
            <li><code><b>text-header</b></code> - element will be inserted in message text header</li>
            <li><code><b>text-footer</b></code> - element will be inserted in message text footer</li>
          </ul><pre><code class="jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Message</span></span>
  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sent<span class="token punctuation">"</span></span>
  <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Hello World<span class="token punctuation">"</span></span>
  <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>John Doe<span class="token punctuation">"</span></span>
  <span class="token attr-name">avatar</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/image.jpg<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Start</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">End</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Content Start</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Content End</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bubble-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Bubble Start</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>bubble-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Bubble End</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Message</span></span><span class="token punctuation">></span></span>

<span class="token punctuation">{</span><span class="token comment">/* Renders to: */</span><span class="token punctuation">}</span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message message-sent<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Start</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message-avatar<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>path/to/image.jpg<span class="token punctuation">)</span></span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Content Start</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message-name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">John Doe</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message-bubble<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Bubble Start</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello World</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Bubble End</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Content End</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">End</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
</pre></code>
          <h2>Access To Messages Instance</h2>
          <p>If you use automatic initalization to init Messages (with <code>init={true}</code> prop) and need to use <a href="../docs/messages.html">Messages API</a> you can access its initialized instance by accessing <code><b>.f7Messages</b></code> component's property.</p>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/react/messages.html">Examples</h2>
            <p>Here is how the full example of Messages page where it can be used together with <a href="messagebar.html">Messagebar</a>:</p><pre><code class="jsx"><span class="token keyword-block">export</span> <span class="token keyword-block">default</span> <span class="token keyword">class</span> <span class="token class-name">extends</span> React<span class="token punctuation">.</span>Component <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token context">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
      attachments<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      sheetVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      typingMessage<span class="token punctuation">:</span> <span class="token literal">null</span><span class="token punctuation">,</span>
      messagesData<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          type<span class="token punctuation">:</span> <span class="token string">'sent'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'Hi, Kate'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          type<span class="token punctuation">:</span> <span class="token string">'sent'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'How are you?'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> <span class="token string">'Kate'</span><span class="token punctuation">,</span>
          type<span class="token punctuation">:</span> <span class="token string">'received'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'Hi, I am good!'</span><span class="token punctuation">,</span>
          avatar<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/100/100/people/9'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> <span class="token string">'Blue Ninja'</span><span class="token punctuation">,</span>
          type<span class="token punctuation">:</span> <span class="token string">'received'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'Hi there, I am also fine, thanks! And how are you?'</span><span class="token punctuation">,</span>
          avatar<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/100/100/people/7'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          type<span class="token punctuation">:</span> <span class="token string">'sent'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'Hey, Blue Ninja! Glad to see you ;)'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          type<span class="token punctuation">:</span> <span class="token string">'sent'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'Hey, look, cutest kitten ever!'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          type<span class="token punctuation">:</span> <span class="token string">'sent'</span><span class="token punctuation">,</span>
          image<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/200/260/cats/4/'</span><span class="token punctuation">,</span>

        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> <span class="token string">'Kate'</span><span class="token punctuation">,</span>
          type<span class="token punctuation">:</span> <span class="token string">'received'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'Nice!'</span><span class="token punctuation">,</span>
          avatar<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/100/100/people/9'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> <span class="token string">'Kate'</span><span class="token punctuation">,</span>
          type<span class="token punctuation">:</span> <span class="token string">'received'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'Like it very much!'</span><span class="token punctuation">,</span>
          avatar<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/100/100/people/9'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> <span class="token string">'Blue Ninja'</span><span class="token punctuation">,</span>
          type<span class="token punctuation">:</span> <span class="token string">'received'</span><span class="token punctuation">,</span>
          text<span class="token punctuation">:</span> <span class="token string">'Awesome!'</span><span class="token punctuation">,</span>
          avatar<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/100/100/people/7'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      images<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token string">'http://lorempixel.com/300/300/cats/1/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/200/300/cats/2/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/400/300/cats/3/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/300/150/cats/4/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/150/300/cats/5/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/300/300/cats/6/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/300/300/cats/7/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/200/300/cats/8/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/400/300/cats/9/'</span><span class="token punctuation">,</span>
        <span class="token string">'http://lorempixel.com/300/150/cats/10/'</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      people<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> <span class="token string">'Kate Johnson'</span><span class="token punctuation">,</span>
          avatar<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/100/100/people/9'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> <span class="token string">'Blue Ninja'</span><span class="token punctuation">,</span>
          avatar<span class="token punctuation">:</span> <span class="token string">'http://lorempixel.com/100/100/people/7'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      answers<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token string">'Yes!'</span><span class="token punctuation">,</span>
        <span class="token string">'No'</span><span class="token punctuation">,</span>
        <span class="token string">'Hm...'</span><span class="token punctuation">,</span>
        <span class="token string">'I am not sure'</span><span class="token punctuation">,</span>
        <span class="token string">'And what about you?'</span><span class="token punctuation">,</span>
        <span class="token string">'May be ;)'</span><span class="token punctuation">,</span>
        <span class="token string">'Lorem ipsum dolor sit amet, consectetur'</span><span class="token punctuation">,</span>
        <span class="token string">'What?'</span><span class="token punctuation">,</span>
        <span class="token string">'Are you sure?'</span><span class="token punctuation">,</span>
        <span class="token string">'Of course'</span><span class="token punctuation">,</span>
        <span class="token string">'Need to think about it'</span><span class="token punctuation">,</span>
        <span class="token string">'Amazing!!!'</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
      responseInProgress<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword-block">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Page</span></span><span class="token punctuation">></span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Navbar</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Messsages<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Navbar</span></span><span class="token punctuation">></span></span><span class="token plain-text">

        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Messagebar</span></span>
          <span class="token attr-name">placeholder</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>placeholder<span class="token punctuation">}</span></span>
          <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>messagebarComponent <span class="token operator">=</span> el<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
          <span class="token attr-name">attachmentsVisible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>attachmentsVisible<span class="token punctuation">}</span></span>
          <span class="token attr-name">sheetVisible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>sheetVisible<span class="token punctuation">}</span></span>
        <span class="token punctuation">></span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Link</span></span>
            <span class="token attr-name">iconIos</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>f7:camera_fill<span class="token punctuation">"</span></span>
            <span class="token attr-name">iconMd</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>material:camera_alt<span class="token punctuation">"</span></span>
            <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inner-start<span class="token punctuation">"</span></span>
            <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>sheetVisible<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>sheetVisible<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
          <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Link</span></span>
            <span class="token attr-name">iconIos</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>f7:arrow_up_fill<span class="token punctuation">"</span></span>
            <span class="token attr-name">iconMd</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>material:send<span class="token punctuation">"</span></span>
            <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inner-end<span class="token punctuation">"</span></span>
            <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>sendMessage<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token context">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
          <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Link</span></span><span class="token punctuation">></span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MessagebarAttachments</span></span><span class="token punctuation">></span></span><span class="token plain-text">
            </span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>attachments<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">image<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MessagebarAttachment</span></span>
                <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span>
                <span class="token attr-name">image</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>image<span class="token punctuation">}</span></span>
                <span class="token attr-name">onAttachmentDelete</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token context">this</span><span class="token punctuation">.</span><span class="token function">deleteAttachment</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
              <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MessagebarAttachment</span></span><span class="token punctuation">></span></span>
            <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MessagebarAttachments</span></span><span class="token punctuation">></span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MessagebarSheet</span></span><span class="token punctuation">></span></span><span class="token plain-text">
            </span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>images<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">image<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MessagebarSheetImage</span></span>
                <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span>
                <span class="token attr-name">image</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>image<span class="token punctuation">}</span></span>
                <span class="token attr-name">checked</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>attachments<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span> <span class="token operator">>=</span> <span class="token number">0</span><span class="token punctuation">}</span></span>
                <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>handleAttachment<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token context">this</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
              <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MessagebarSheetImage</span></span><span class="token punctuation">></span></span>
            <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MessagebarSheet</span></span><span class="token punctuation">></span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Messagebar</span></span><span class="token punctuation">></span></span><span class="token plain-text">

        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Messages</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>messagesComponent <span class="token operator">=</span> el<span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MessagesTitle</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span><span class="token plain-text">Sunday, Feb 9,</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span><span class="token plain-text"> 12:58</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MessagesTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text">

          </span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messagesData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">message<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Message</span></span>
              <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>index<span class="token punctuation">}</span></span>
              <span class="token attr-name">type</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>message<span class="token punctuation">.</span>type<span class="token punctuation">}</span></span>
              <span class="token attr-name">image</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>message<span class="token punctuation">.</span>image<span class="token punctuation">}</span></span>
              <span class="token attr-name">name</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>message<span class="token punctuation">.</span>name<span class="token punctuation">}</span></span>
              <span class="token attr-name">avatar</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>message<span class="token punctuation">.</span>avatar<span class="token punctuation">}</span></span>
              <span class="token attr-name">first</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span><span class="token function">isFirstMessage</span><span class="token punctuation">(</span>message<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
              <span class="token attr-name">last</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span><span class="token function">isLastMessage</span><span class="token punctuation">(</span>message<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
              <span class="token attr-name">tail</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span><span class="token function">isTailMessage</span><span class="token punctuation">(</span>message<span class="token punctuation">,</span> index<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
            <span class="token punctuation">></span></span><span class="token plain-text">
              </span><span class="token punctuation">{</span>message<span class="token punctuation">.</span>text <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">dangerouslySetInnerHTML</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>__html<span class="token punctuation">:</span> message<span class="token punctuation">.</span>text<span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
              <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Message</span></span><span class="token punctuation">></span></span>
          <span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
          </span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>typingMessage <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Message</span></span>
              <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>received<span class="token punctuation">"</span></span>
              <span class="token attr-name">typing</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
              <span class="token attr-name">first</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
              <span class="token attr-name">last</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
              <span class="token attr-name">tail</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
              <span class="token attr-name">header</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>typingMessage<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> is typing</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span>
              <span class="token attr-name">avatar</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token context">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>typingMessage<span class="token punctuation">.</span>avatar<span class="token punctuation">}</span></span>
            <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Message</span></span><span class="token punctuation">></span></span>
          <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Messages</span></span><span class="token punctuation">></span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Page</span></span><span class="token punctuation">></span></span>
    <span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token keyword">get</span> <span class="token function">attachmentsVisible</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword-block">return</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>attachments<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">get</span> <span class="token function">placeholder</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword-block">return</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>attachments<span class="token punctuation">.</span>length <span class="token operator">></span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">'Add comment or Send'</span> <span class="token punctuation">:</span> <span class="token string">'Message'</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">$f7ready</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token context">self</span><span class="token punctuation">.</span>messagebar <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>messagebarComponent<span class="token punctuation">.</span>f7Messagebar<span class="token punctuation">;</span>
      <span class="token context">self</span><span class="token punctuation">.</span>messages <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>messagesComponent<span class="token punctuation">.</span>f7Messages<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">isFirstMessage</span><span class="token punctuation">(</span><span class="token parameter">message<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> previousMessage <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messagesData<span class="token punctuation">[</span>index <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span>isTitle<span class="token punctuation">)</span> <span class="token keyword-block">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>previousMessage <span class="token operator">||</span> previousMessage<span class="token punctuation">.</span>type <span class="token operator">!==</span> message<span class="token punctuation">.</span>type <span class="token operator">||</span> previousMessage<span class="token punctuation">.</span>name <span class="token operator">!==</span> message<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token keyword-block">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token keyword-block">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">isLastMessage</span><span class="token punctuation">(</span><span class="token parameter">message<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> nextMessage <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messagesData<span class="token punctuation">[</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span>isTitle<span class="token punctuation">)</span> <span class="token keyword-block">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>nextMessage <span class="token operator">||</span> nextMessage<span class="token punctuation">.</span>type <span class="token operator">!==</span> message<span class="token punctuation">.</span>type <span class="token operator">||</span> nextMessage<span class="token punctuation">.</span>name <span class="token operator">!==</span> message<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token keyword-block">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token keyword-block">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">isTailMessage</span><span class="token punctuation">(</span><span class="token parameter">message<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> nextMessage <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messagesData<span class="token punctuation">[</span>index <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span>message<span class="token punctuation">.</span>isTitle<span class="token punctuation">)</span> <span class="token keyword-block">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>nextMessage <span class="token operator">||</span> nextMessage<span class="token punctuation">.</span>type <span class="token operator">!==</span> message<span class="token punctuation">.</span>type <span class="token operator">||</span> nextMessage<span class="token punctuation">.</span>name <span class="token operator">!==</span> message<span class="token punctuation">.</span>name<span class="token punctuation">)</span> <span class="token keyword-block">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token keyword-block">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">deleteAttachment</span><span class="token punctuation">(</span><span class="token parameter">image</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> attachments <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>attachments<span class="token punctuation">;</span>
    <span class="token keyword">const</span> index <span class="token operator">=</span> attachments<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
    attachments<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>index<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> attachments <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">handleAttachment</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> attachments <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>attachments<span class="token punctuation">;</span>
    <span class="token keyword">const</span> index <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">$$</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parents</span><span class="token punctuation">(</span><span class="token string">'label.checkbox'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> image <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>images<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// Add to attachments</span>
      attachments<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword-block">else</span> <span class="token punctuation">{</span>
      <span class="token comment">// Remove from attachments</span>
      attachments<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span>attachments<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> attachments <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">sendMessage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>messagebar<span class="token punctuation">.</span><span class="token function">getValue</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/\n/g</span><span class="token punctuation">,</span> <span class="token string">'&lt;br>'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">const</span> messagesToSend <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>attachments<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">attachment</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      messagesToSend<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        image<span class="token punctuation">:</span> attachment<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span>text<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      messagesToSend<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        text<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span>messagesToSend<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword-block">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token comment">// Reset attachments</span>
      attachments<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token comment">// Hide sheet</span>
      sheetVisible<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      <span class="token comment">// Send message</span>
      messagesData<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messagesData<span class="token punctuation">,</span> <span class="token operator">...</span>messagesToSend<span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token context">self</span><span class="token punctuation">.</span>messagebar<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// Focus area</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span>text<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token context">self</span><span class="token punctuation">.</span>messagebar<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// Mock response</span>
    <span class="token keyword-block">if</span> <span class="token punctuation">(</span><span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>responseInProgress<span class="token punctuation">)</span> <span class="token keyword-block">return</span><span class="token punctuation">;</span>
    <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      responseInProgress<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> answer <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>answers<span class="token punctuation">[</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>answers<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>people<span class="token punctuation">[</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span><span class="token built-in">Math</span><span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>people<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        typingMessage<span class="token punctuation">:</span> <span class="token punctuation">{</span>
          name<span class="token punctuation">:</span> person<span class="token punctuation">.</span>name<span class="token punctuation">,</span>
          avatar<span class="token punctuation">:</span> person<span class="token punctuation">.</span>avatar<span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
        <span class="token context">self</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          messagesData<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token context">self</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>messagesData<span class="token punctuation">,</span> <span class="token punctuation">{</span>
            text<span class="token punctuation">:</span> answer<span class="token punctuation">,</span>
            type<span class="token punctuation">:</span> <span class="token string">'received'</span><span class="token punctuation">,</span>
            name<span class="token punctuation">:</span> person<span class="token punctuation">.</span>name<span class="token punctuation">,</span>
            avatar<span class="token punctuation">:</span> person<span class="token punctuation">.</span>avatar<span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
          typingMessage<span class="token punctuation">:</span> <span class="token literal">null</span><span class="token punctuation">,</span>
          responseInProgress<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">4000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>